<template>
  <div class="study">
    <div class="study-header">
      <headerPhoto>
        <div class="title">
          我的学习路线
        </div>
      </headerPhoto>
    </div>
    <waveView></waveView>
    <div class="main">
      <div class="chat-container">
        <!-- 时间轴线 -->
        <div class="timeline"></div>
        <div v-for="item in message" :key="item.id" :class="['message', item.isMine ? 'right' : 'left']">
          <div class="content">
            <h5>{{ item.title }}</h5>
            <div class="introduction">{{ item.introduction }}</div>
            <div class="mt-2 text-center">
              <router-link :to="`/detail?id=${item.id}`">
                <button class=" btn btn-sm btn-outline-success">详情</button>
              </router-link>
            </div>

          </div>
          <div :class="['dot', item.isMine ? 'red' : 'blue']"></div>
          <div class="avatar"></div>
          <div v-if="item.work" :class="['works', item.isMine ? 'right' : 'left']">
            <a :class="['work-item', item.isMine ? 'left' : 'right']" v-for="(opt, index) in item.work" :key="index"
              :href="`${item.url && item.url[index] ? item.url[index] : 'javascript:;'}`" target="_blank">
              <div>{{ opt }}</div>
            </a>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import headerPhoto from '@/component/headerPhoto.vue';
import waveView from '@/component/waveView.vue';
import { ref } from 'vue';


const message = ref([
  {
    id: 18,
    title: '网页开发HTMLCSS',
    introduction: 'HTML 是网页的 “骨架”，负责搭建页面结构；CSS 是网页的 “妆容”，负责美化外观。两者是前端开发的基础，学好它们就能独立制作静态网页。',
    isMine: false,
    work: ['我的第一个网页'],
    url: ['http://lict.3vhost.work/htmlcss']
  },
  {
    id: 19,
    title: 'javascript',
    introduction: '一门弱类型的脚本语言，使网页具有交互性的脚本语言。学习变量、函数、DOM操作和事件处理，实现动态更新内容、控制多媒体、验证表单等用户交互功能。',
    isMine: true,
    work: ['我的第一个小游戏', '我的第二个小游戏'],
    url: ['http://lict.3vhost.work/game/tanchishe/', 'http://lict.3vhost.work/game/xiaoxiaole/']
  },
  {
    id: 20,
    title: 'jQuery',
    introduction: '一个快速、简洁的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互，旨在让开发者更轻松地编写跨浏览器的代码。',
    isMine: false
  },
  {
    id: 21,
    title: 'Ajax以及Bootstrap',
    introduction: 'Ajax实现网页异步更新，无需刷新即可与服务器交换数据。Bootstrap是流行的前端框架，提供预定义样式和组件，用于快速开发响应式网站。',
    isMine: true
  },
  {
    id: 22,
    title: 'HTML5 CSS3',
    introduction: '新一代网页标准。HTML5新增音视频、Canvas绘图等功能；CSS3提供过渡、动画、弹性布局等强大样式，能创建更丰富的用户体验。',
    isMine: false
  },
  {
    id: 23,
    title: 'ES6',
    introduction: 'JavaScript语言的重大更新。引入let/const、箭头函数、解构赋值、模块化等新特性，极大地提升了代码的简洁性、可读性和开发效率。',
    isMine: true
  },
  {
    id: 24,
    title: 'Git',
    introduction: '分布式版本控制系统。用于跟踪文件变更，记录代码历史。支持分支管理，便于团队协作开发与版本回溯，是现代开发的必备工具。',
    isMine: false
  },
  {
    id: 25,
    title: 'Webpack',
    introduction: '现代静态模块打包器。它将众多模块（JS、CSS、图片）及其依赖打包成少数资源文件，优化前端项目性能与加载速度。',
    isMine: true
  },
  {
    id: 32,
    title: 'Vue',
    introduction: '一套用于构建用户界面的渐进式JavaScript框架。核心库只关注视图层，易于上手，并能与其它库或已有项目整合，驱动复杂的单页应用。',
    isMine: false,
    work: ['我的第一个项目']
  },
  {
    id: 27,
    title: '阿里云服务部署',
    introduction: '学习如何将开发完成的应用（代码、数据库等）配置、上传并发布到阿里云服务器，使其能够通过公网访问，是项目上线的最后关键步骤。',
    isMine: true
  },
  {
    id: 28,
    title: 'Nodejs',
    introduction: '一个让JavaScript运行在服务器端的平台。它使JS能用于后端开发，处理文件、数据库操作，构建高性能的网络服务，实现全栈JavaScript。',
    isMine: false
  },
  {
    id: 29,
    title: '小程序',
    introduction: '一种在大型应用（如微信）内无需下载安装即可使用的应用。它提供了丰富的API和组件，让开发者能快速构建功能丰富、体验接近原生App的应用。',
    isMine: true
  },
  {
    id: 30,
    title: 'uni-app',
    introduction: '一个使用Vue.js语法开发所有前端应用的框架。编写一套代码，可发布到iOS、Android、Web及各种小程序平台，极大提升跨端开发效率。',
    isMine: false
  },
  {
    id: 31,
    title: 'React',
    introduction: 'React采用声明式设计和虚拟DOM技术，通过组件化架构实现高效渲染和动态交互，广泛应用于Web、移动端（React Native）及跨平台开发。',
    isMine: true
  },
]);



</script>

<style lang="less" scoped>
.study {
  padding-bottom: 50px;
}

.study-header {
  .title {
    font-size: 36px;
    color: #fff;
  }
}

.main {
  width: 100%;
  background: linear-gradient(90deg, rgba(60, 10, 30, .05) 5%, #fff 0), linear-gradient(1turn, rgba(60, 10, 30, .05) 5%, #fff 0);
  background-size: 30px 30px;
  overflow: hidden;

}

.chat-container {
  width: 80%;
  // max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 0; // 添加垂直内边距



}

/* 时间轴线 */
.timeline {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background-color: #FFA500;
  z-index: 1;
}

.message {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;


  .works {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;

    &.left {
      position: absolute;
      right: 20%;
    }

    &.right {
      position: absolute;
      left: 20%;
    }
  }

  .work-item {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

    &.left {
      align-self: flex-start;
      margin-right: auto;
    }

    &.right {
      align-self: flex-end;
      margin-left: auto;
    }
  }
}

.message.left {
  flex-direction: row;
  // justify-content: flex-end;
  padding-right: 58%;
}

.message.right {
  flex-direction: row-reverse;
  // justify-content: flex-end;
  padding-left: 58%;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  // background-color: #ccc;
  font-size: 18px;
  position: absolute;
  z-index: 4;
  background-image: url(../static/imgs/images/myUser.jpg);
  background-size: cover;
}

.message.left .avatar {
  right: 52%; // 头像定位在时间轴上
}

.message.right .avatar {
  left: 52%; // 头像定位在时间轴上
}

.content {
  padding: 12px 16px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message.left .content {
  background-color: #a0d8ff;
  color: #333;
  text-align: left;
}

.message.right .content {
  background-color: #b3d9ff;
  color: #333;
  text-align: left;
}

.introduction {
  font-size: 14px;
  color: #666;
}

/* 箭头样式 */
.content::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  top: 50%;
  transform: translateY(-50%);
}

.message.left .content::before {
  border-left: 10px solid #a0d8ff;
  right: -10px;
}

.message.right .content::before {
  border-right: 10px solid #b3d9ff;
  left: -10px;
}

/* 圆点节点 */
.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid currentColor;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.message.left .dot {
  right: calc(50% - 10px);
}

.message.right .dot {
  left: calc(50% - 10px);
}

.dot.red {
  border-color: #FF6B6B;
}

.dot.blue {
  border-color: #4ECDC4;
}

@media (max-width: 876px) {
  .message {
    .avatar {
      display: none;
    }
  }
}

@media (max-width: 550px) {

  .message {

    .works.left {
      right: 4%;
    }

    .works.right {
      left: 1%;
    }
  }

  .message.left {
    // width: 100%;
    padding-right: 50%;


    .content {
      // text-align: left;
      transform: translateX(-15%);
    }
  }

  .message.right {
    // width: 100%;
    padding-left: 50%;

    // transform: translateX(10%);
    .content {
      // text-align: left;
      transform: translateX(15%);
    }
  }


}
</style>
